<template>
  <div>
    <q-splitter v-model="splitterModel" horizontal style="height: 98vh">
      <template v-slot:before>
        <div class="q-pa-md">
          <div class="row">
            <!-- <div class="col-2">
              <LeftLink></LeftLink>
            </div> -->
            <div class="col-8">
              <MainLink></MainLink>
            </div>
            <div class="col-4">
              <RightLink></RightLink>
            </div>
          </div>
        </div>
      </template>

      <template v-slot:after>
        <FooterLink></FooterLink>
      </template>
    </q-splitter>
  </div>
</template>

<script setup>
import { ref } from "vue";
import LeftLink from "src/components/LeftLink.vue";
import RightLink from "src/components/RightLink.vue";
import MainLink from "components/MainLink.vue";
import FooterLink from "components/FooterLink.vue";

const splitterModel = ref(90);
</script>
